<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>小老鼠创作过程</title>
    <link rel="stylesheet" href="style.css">
    <style>
        .creation-container {
            max-width: 1000px;
            margin: 50px auto;
            padding: 2rem;
            background: rgba(255,255,255,0.9);
            border-radius: 20px;
        }
        .creation-step {
            margin: 2rem 0;
            display: grid;
            grid-template-columns: 200px 1fr;
            gap: 2rem;
            align-items: center;
        }
        .creation-img {
            width: 100%;
            border-radius: 10px;
            box-shadow: 0 3px 6px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <div class="creation-container">
        <h1>🐭 小老鼠诞生记</h1>
        
        <div class="creation-step">
            <img src="images/设计理念.png" class="creation-img">
            <div>
                <h2>一、设计理念</h2>
                <p>大学生精神状态，“鼠文化”，“萌文化”</p>
            </div>
        </div>

        <div class="creation-step">
            <img src="images/配色方案.png" class="creation-img">
            <div>
                <h2>二、配色方案</h2>
                <p>采用暖色复古撞色，温和舒适</p>
            </div>
        </div>

        <div class="creation-step">
            <img src="images/草稿阶段.png" class="creation-img">
            <div>
                <h2>三、草稿阶段</h2>
                <p>多次尝试、优化动态</p>
            </div>
        </div>

        <div class="creation-step">
            <img src="images/电子版绘制.png" class="creation-img">
            <div>
                <h2>四、电子版绘制</h2>
                <p>逐帧动画，合理丰富有趣</p>
            </div>
        </div>

        <a href="index.html" class="control-btn">🔙 返回游戏</a>
    </div>
</body>
</html>